<template>
  <div>
    <div id="header">
      <Header></Header>
    </div>
    <!-- body -->
    <div class="content">
      <!-- 路由占位符 -->
      <router-view v-slot="{ Component }">
        <keep-alive >
          <Component :is="Component"></Component>
        </keep-alive>
      </router-view>
    </div>
    <div class="tabbar">
      <!-- tabbar -->
      <TabBar></TabBar>
    </div>
    <div class="nav">
      <Nav></Nav>
    </div>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar/TabBar.vue'
import Header from '@/components/Header/Header.vue'
import Nav from '@/components/Nav/Nav.vue'
export default {
  name: 'App',
  components: {
    TabBar,
    Header,
    Nav
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 500px) {
  .nav{
    display: none;
  }
}

@media screen and (min-width: 1280px) {
  #header{
    display: none;
  }
  .content{
    margin: 30px;
  }
  .tabbar{
    display: none;
  }
  .nav{
    display: inline;
  }
}
</style>
